<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时交易量K线图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }
        .status {
            display: flex;
            align-items: center;
        }
        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #4caf50;
            margin-right: 8px;
        }
        .chart-container {
            height: 600px;
        }
        .controls {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        button {
            padding: 8px 16px;
            background-color: #1976d2;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #1565c0;
        }
        .last-update {
            margin-top: 10px;
            text-align: right;
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="title">实时交易量K线图 (BTC/USDT)</div>
            <div class="status">
                <div class="status-indicator"></div>
                <span>实时更新中</span>
            </div>
        </div>
        <div id="chart" class="chart-container"></div>
        <div class="last-update">
            最后更新: <span id="update-time">--</span>
        </div>
        <div class="controls">
            <button id="pause-btn">暂停更新</button>
            <button id="refresh-btn">立即刷新</button>
        </div>
    </div>

    <script>
        // 初始化ECharts实例
        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom);
        
        // 图表配置选项
        let option = {
            animation: false,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
                borderWidth: 1,
                borderColor: '#ccc',
                padding: 10,
                textStyle: {
                    color: '#000'
                }
            },
            legend: {
                data: ['K线', '交易量']
            },
            grid: [
                {
                    left: '10%',
                    right: '8%',
                    height: '50%'
                },
                {
                    left: '10%',
                    right: '8%',
                    top: '63%',
                    height: '16%'
                }
            ],
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    scale: true,
                    boundaryGap: false,
                    axisLine: { onZero: false },
                    splitLine: { show: false },
                    splitNumber: 20,
                    min: 'dataMin',
                    max: 'dataMax'
                },
                {
                    type: 'category',
                    gridIndex: 1,
                    data: [],
                    scale: true,
                    boundaryGap: false,
                    axisLine: { onZero: false },
                    axisTick: { show: false },
                    splitLine: { show: false },
                    axisLabel: { show: false },
                    splitNumber: 20,
                    min: 'dataMin',
                    max: 'dataMax'
                }
            ],
            yAxis: [
                {
                    scale: true,
                    splitArea: {
                        show: true
                    }
                },
                {
                    scale: true,
                    gridIndex: 1,
                    splitNumber: 2,
                    axisLabel: { show: false },
                    axisLine: { show: false },
                    axisTick: { show: false },
                    splitLine: { show: false }
                }
            ],
            dataZoom: [
                {
                    type: 'inside',
                    xAxisIndex: [0, 1],
                    start: 80,
                    end: 100
                }
            ],
            series: [
                {
                    name: 'K线',
                    type: 'candlestick',
                    data: [],
                    itemStyle: {
                        color: '#ef232a',
                        color0: '#14b143',
                        borderColor: '#ef232a',
                        borderColor0: '#14b143'
                    }
                },
                {
                    name: '交易量',
                    type: 'bar',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    data: [],
                    itemStyle: {
                        color: function(params) {
                            const i = params.dataIndex;
                            const open = option.series[0].data[i] ? option.series[0].data[i][0] : 0;
                            const close = option.series[0].data[i] ? option.series[0].data[i][1] : 0;
                            return close >= open ? '#14b143' : '#ef232a';
                        }
                    }
                }
            ]
        };

        // 设置初始选项
        myChart.setOption(option);

        // 生成模拟数据函数
        function generateData(baseTime, count) {
            const times = [];
            const candleData = [];
            const volData = [];
            
            let basePrice = 30000 + Math.random() * 2000;
            let baseVol = 100 + Math.random() * 50;
            let timestamp = baseTime;
            
            for (let i = 0; i < count; i++) {
                // 时间递增
                timestamp -= 30000; // 30秒间隔
                const timeStr = new Date(timestamp).toLocaleTimeString();
                times.push(timeStr);
                
                // 生成K线数据 [开盘价, 收盘价, 最低价, 最高价]
                const open = basePrice;
                const change = (Math.random() - 0.5) * 100;
                const close = open + change;
                const low = Math.min(open, close) - Math.random() * 50;
                const high = Math.max(open, close) + Math.random() * 50;
                
                candleData.push([open, close, low, high]);
                
                // 生成交易量数据，与价格变动相关
                const vol = baseVol + Math.random() * 30;
                volData.push(vol);
                
                // 为下一个数据点更新基准值
                basePrice = close;
                baseVol = Math.max(10, vol + (Math.random() - 0.5) * 20);
            }
            
            return { times, candleData, volData };
        }

        // 初始数据
        const now = Date.now();
        const initialData = generateData(now, 50);
        
        // 更新图表数据
        function updateChartData(times, candleData, volData) {
            option.xAxis[0].data = times;
            option.xAxis[1].data = times;
            option.series[0].data = candleData;
            option.series[1].data = volData;
            
            myChart.setOption(option);
            
            // 更新最后刷新时间
            document.getElementById('update-time').textContent = new Date().toLocaleTimeString();
        }

        // 初始数据加载
        updateChartData(initialData.times, initialData.candleData, initialData.volData);

        // 定时更新数据
        let updateInterval = 30000; // 30秒
        let intervalId = setInterval(updateData, updateInterval);
        
        // 暂停状态
        let isPaused = false;
        
        // 更新数据函数
        function updateData() {
            if (isPaused) return;
            
            // 模拟从数据库获取最新数据
            const newDataPoint = generateData(Date.now(), 1);
            
            // 获取当前数据
            const times = option.xAxis[0].data.slice();
            const candleData = option.series[0].data.slice();
            const volData = option.series[1].data.slice();
            
            // 移除最早的数据点
            if (times.length > 100) {
                times.shift();
                candleData.shift();
                volData.shift();
            }
            
            // 添加新数据点
            times.push(newDataPoint.times[0]);
            candleData.push(newDataPoint.candleData[0]);
            volData.push(newDataPoint.volData[0]);
            
            // 更新图表
            updateChartData(times, candleData, volData);
        }
        
        // 控制按钮事件监听
        document.getElementById('pause-btn').addEventListener('click', function() {
            isPaused = !isPaused;
            this.textContent = isPaused ? '继续更新' : '暂停更新';
            
            const statusIndicator = document.querySelector('.status-indicator');
            statusIndicator.style.backgroundColor = isPaused ? '#ff9800' : '#4caf50';
            
            document.querySelector('.status span').textContent = 
                isPaused ? '更新已暂停' : '实时更新中';
        });
        
        document.getElementById('refresh-btn').addEventListener('click', function() {
            updateData();
        });

        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>